
<template>
  <div>
    <a-tabs v-model="tab" type="card">
      <a-tab-pane :key="1"><div slot="tab"><i class="fa fa-calendar-o mr10"></i>秒</div></a-tab-pane>
      <a-tab-pane :key="2"><div slot="tab"><i class="fa fa-calendar-o mr10"></i>分种</div></a-tab-pane>
      <a-tab-pane :key="3"><div slot="tab"><i class="fa fa-calendar-o mr10"></i>小时</div></a-tab-pane>
      <a-tab-pane :key="4"><div slot="tab"><i class="fa fa-calendar-o mr10"></i>天</div></a-tab-pane>
      <a-tab-pane :key="5"><div slot="tab"><i class="fa fa-calendar-o mr10"></i>月</div></a-tab-pane>
      <!--
      <a-tab-pane :key="6"><div slot="tab"><i class="fa fa-calendar-o mr10"></i>周</div></a-tab-pane>
      <a-tab-pane :key="7"><div slot="tab"><i class="fa fa-calendar-o mr10"></i>年</div></a-tab-pane>
      -->
    </a-tabs>
    <div v-show="tab===1">
      <div style="padding:10px 30px;color:#0489cc">
        允许的通配符[ , - * / ]
      </div>
      <table>
        <tr><td><a-radio :checked="second.index===1" @change="chSecond(1)"></a-radio></td><td>每秒</td></tr>
        <tr><td><a-radio :checked="second.index===2" @change="chSecond(2)"></a-radio></td><td>周期从<a-input-number @change="chSecond()" v-model="second.n1" :min="0" :max="60" class="num"></a-input-number>到<a-input-number @change="chSecond()" v-model="second.n2" :min="second.n1" :max="60" class="num"></a-input-number>秒</td></tr>
        <tr><td><a-radio :checked="second.index===3" @change="chSecond(3)"></a-radio></td><td>从<a-input-number @change="chSecond()" v-model="second.n3" :min="0" :max="60" class="num"></a-input-number>秒开始，每<a-input-number @change="chSecond()" v-model="second.n4" :min="1" :max="60" class="num"></a-input-number>秒执行一次</td></tr>
        <tr><td><a-radio :checked="second.index===4" @change="chSecond(4)"></a-radio></td><td>指定</td></tr>
        <tr>
          <td></td>
          <td>
            <a-checkbox @change="ckSecond($event,i)" style="margin:6px;width:60px;" v-for="i in 59" :key="`second${i}`">{{ i }}</a-checkbox>
          </td>
        </tr>
      </table>
    </div>
    <div v-show="tab===2">
      <div style="padding:10px 30px;color:#0489cc">
        允许的通配符[ , - * / ]
      </div>
      <table>
        <tr><td><a-radio :checked="minute.index===1" @change="chMinute(1)"></a-radio></td><td>每分钟</td></tr>
        <tr><td><a-radio :checked="minute.index===2" @change="chMinute(2)"></a-radio></td><td>周期从<a-input-number @change="chMinute()" v-model="minute.n1" :min="0" :max="60" class="num"></a-input-number>到<a-input-number @change="chMinute()" v-model="minute.n2" :min="minute.n1" :max="60" class="num"></a-input-number>分钟</td></tr>
        <tr><td><a-radio :checked="minute.index===3" @change="chMinute(3)"></a-radio></td><td>从<a-input-number @change="chMinute()" v-model="minute.n3" :min="0" :max="60" class="num"></a-input-number>分钟开始，每<a-input-number @change="chMinute()" v-model="minute.n4" :min="1" :max="60" class="num"></a-input-number>分钟执行一次</td></tr>
        <tr><td><a-radio :checked="minute.index===4" @change="chMinute(4)"></a-radio></td><td>指定</td></tr>
        <tr>
          <td></td>
          <td>
            <a-checkbox @change="ckMinute($event,i)" style="margin:6px;width:60px;" v-for="i in 59" :key="`minute${i}`">{{ i }}</a-checkbox>
          </td>
        </tr>
      </table>
    </div>
    <div v-show="tab===3">
      <div style="padding:10px 30px;color:#0489cc">
        允许的通配符[ , - * / ]
      </div>
      <table>
        <tr><td><a-radio :checked="hour.index===1" @change="chHour(1)"></a-radio></td><td>每小时</td></tr>
        <tr><td><a-radio :checked="hour.index===2" @change="chHour(2)"></a-radio></td><td>周期从<a-input-number @change="chHour()" v-model="hour.n1" :min="0" :max="24" class="num"></a-input-number>到<a-input-number @change="chHour()" v-model="hour.n2" :min="hour.n1" :max="24" class="num"></a-input-number>小时</td></tr>
        <tr><td><a-radio :checked="hour.index===3" @change="chHour(3)"></a-radio></td><td>从<a-input-number @change="chHour()" v-model="hour.n3" :min="0" :max="24" class="num"></a-input-number>时开始，每<a-input-number @change="chHour()" v-model="hour.n4" :min="1" :max="24" class="num"></a-input-number>小时执行一次</td></tr>
        <tr><td><a-radio :checked="hour.index===4" @change="chHour(4)"></a-radio></td><td>指定</td></tr>
        <tr>
          <td></td>
          <td>
            <a-checkbox @change="ckHour($event,i)" style="margin:6px;width:60px;" v-for="i in 23" :key="`hour${i}`">{{ i }}</a-checkbox>
          </td>
        </tr>
      </table>
    </div>
    <div v-show="tab===4">
      <div style="padding:10px 30px;color:#0489cc">
        允许的通配符[ , - * / L W ]
      </div>
      <table>
        <tr><td><a-radio :checked="day.index===1" @change="chDay(1)"></a-radio></td><td>每日</td></tr>
        <tr><td><a-radio :checked="day.index===2" @change="chDay(2)"></a-radio></td><td>周期从<a-input-number @change="chDay()" v-model="day.n1" :min="0" :max="31" class="num"></a-input-number>到<a-input-number @change="chDay()" v-model="day.n2" :min="day.n1" :max="31" class="num"></a-input-number>日</td></tr>
        <tr><td><a-radio :checked="day.index===3" @change="chDay(3)"></a-radio></td><td>从<a-input-number @change="chDay()" v-model="day.n3" :min="0" :max="31" class="num"></a-input-number>日开始，每<a-input-number @change="chDay()" v-model="day.n4" :min="1" :max="31" class="num"></a-input-number>日执行一次</td></tr>
        <tr><td><a-radio :checked="day.index===4" @change="chDay(4)"></a-radio></td><td>指定</td></tr>
        <tr>
          <td></td>
          <td>
            <a-checkbox @change="ckDay($event,i)" style="margin:6px;width:60px;" v-for="i in 31" :key="`day${i}`">{{ i }}</a-checkbox>
          </td>
        </tr>
        <tr><td><a-radio :checked="day.index===5" @change="chDay(5)"></a-radio></td><td>不指定</td></tr>
        <tr><td><a-radio :checked="day.index===6" @change="chDay(6)"></a-radio></td><td>每月<a-input-number @change="chDay()" v-model="day.n5" :min="1" :max="31" class="num"></a-input-number>号最近的工作日</td></tr>
        <tr><td><a-radio :checked="day.index===7" @change="chDay(7)"></a-radio></td><td>每月倒数第<a-input-number @change="chDay()" v-model="day.n6" :min="1" :max="31" class="num"></a-input-number>天</td></tr>
        <tr><td><a-radio :checked="day.index===8" @change="chDay(8)"></a-radio></td><td>每月最后一个工作日</td></tr>
      </table>
    </div>
    <div v-show="tab===5">
      <div style="padding:10px 30px;color:#0489cc">
        允许的通配符[ , - * / ]
      </div>
      <table>
        <tr><td><a-radio :checked="month.index===1" @change="chMonth(1)"></a-radio></td><td>每月</td></tr>
        <tr><td><a-radio :checked="month.index===2" @change="chMonth(2)"></a-radio></td><td>周期从<a-input-number @change="chMonth()" v-model="month.n1" :min="0" :max="12" class="num"></a-input-number>到<a-input-number @change="chMonth()" v-model="month.n2" :min="month.n1" :max="12" class="num"></a-input-number>月</td></tr>
        <tr><td><a-radio :checked="month.index===3" @change="chMonth(3)"></a-radio></td><td>从<a-input-number @change="chMonth()" v-model="month.n3" :min="0" :max="12" class="num"></a-input-number>月开始，每<a-input-number @change="chMonth()" v-model="month.n4" :min="1" :max="12" class="num"></a-input-number>月执行一次</td></tr>
        <tr><td><a-radio :checked="month.index===4" @change="chMonth(4)"></a-radio></td><td>指定</td></tr>
        <tr>
          <td></td>
          <td>
            <a-checkbox @change="ckMonth($event,i)" style="margin:6px;width:60px;" v-for="i in 12" :key="`month${i}`">{{ i }}</a-checkbox>
          </td>
        </tr>
      </table>
    </div>
    <div v-show="tab===6">
      <div style="padding:10px 30px;color:#0489cc">
        允许的通配符[ , - * / L # ]
      </div>
      <table>
        <tr><td><a-radio></a-radio></td><td>每周</td></tr>
        <tr><td><a-radio></a-radio></td><td>周期从<a-input-number class="num"></a-input-number>到<a-input-number class="num"></a-input-number>周</td></tr>
        <tr><td><a-radio></a-radio></td><td>从<a-input-number class="num"></a-input-number>周开始，每<a-input-number class="num"></a-input-number>周执行一次</td></tr>
        <tr><td><a-radio></a-radio></td><td>指定</td></tr>
        <tr>
          <td></td>
          <td>
            <a-checkbox style="margin:6px;width:60px;" v-for="i in 7" :key="`month${i}`">{{ i }}</a-checkbox>
          </td>
        </tr>
        <tr><td><a-radio></a-radio></td><td>不指定</td></tr>
        <tr><td><a-radio></a-radio></td><td>每月最后一个星期<a-input-number class="num"></a-input-number></td></tr>
      </table>
    </div>
    <div v-show="tab===7">
      <div style="padding:10px 30px;color:#0489cc">
        允许的通配符[ , - * / L # ]
      </div>
      <table>
        <tr><td><a-radio></a-radio></td><td>每年</td></tr>
        <tr><td><a-radio></a-radio></td><td>周期从<a-input-number class="num"></a-input-number>到<a-input-number class="num"></a-input-number>年</td></tr>
        <tr><td><a-radio></a-radio></td><td>从<a-input-number class="num"></a-input-number>年开始，每<a-input-number class="num"></a-input-number>年执行一次</td></tr>
        <tr><td><a-radio></a-radio></td><td>指定</td></tr>
        <tr>
          <td></td>
          <td>
            <a-checkbox style="margin:6px;width:80px;" v-for="i in 30" :key="`year${i}`">{{ 2020+i }}</a-checkbox>
          </td>
        </tr>
        <tr><td><a-radio></a-radio></td><td>不指定</td></tr>
      </table>
    </div>
    <div style="border:solid 1px #37d652;padding:30px;margin-top:30px;font-size:20px;">
      Cron表达式：{{ second.value }} {{ minute.value }} {{ hour.value }} {{ day.value }} {{ month.value }} ?
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tab: 1,
      second: {
        index: 1,
        value: '*',
        n1: 1,
        n2: 2,
        n3: 0,
        n4: 1,
        nums: []
      },
      minute: {
        index: 1,
        value: '*',
        n1: 1,
        n2: 2,
        n3: 0,
        n4: 1,
        nums: []
      },
      hour: {
        index: 1,
        value: '*',
        n1: 1,
        n2: 2,
        n3: 0,
        n4: 1,
        nums: []
      },
      day: {
        index: 1,
        value: '*',
        n1: 1,
        n2: 2,
        n3: 0,
        n4: 1,
        n5: 1,
        n6: 1,
        nums: []
      },
      month: {
        index: 1,
        value: '*',
        n1: 1,
        n2: 2,
        n3: 0,
        n4: 1,
        nums: []
      }
    }
  },
  methods: {
    getCron () {
      return `${ this.second.value } ${ this.minute.value } ${ this.hour.value } ${ this.day.value } ${ this.month.value } ?`
    },
    chSecond (index) {
      if (index) {
        this.second.index = index
      }
      if (this.second.index === 1) {
        this.second.value = '*'
      } else if (this.second.index === 2) {
        this.second.value = `${this.second.n1}-${this.second.n2}`
      } else if (this.second.index === 3) {
        this.second.value = `${this.second.n3}/${this.second.n4}`
      } else if (this.second.index === 4) {
        if (this.second.nums.length === 0) {
          this.second.value = 1
        } else {
          this.second.value = this.second.nums.join(',')
        }
      }
    },
    ckSecond (e, i) {
      const ck = e.target.checked
      if (ck) {
        this.second.nums.push(i)
      } else {
        const index = this.second.nums.indexOf(i)
        this.second.nums.splice(index, 1)
      }
      this.chSecond()
    },
    chMinute (index) {
      if (index) {
        this.minute.index = index
      }
      if (this.minute.index === 1) {
        this.minute.value = '*'
      } else if (this.minute.index === 2) {
        this.minute.value = `${this.minute.n1}-${this.minute.n2}`
      } else if (this.minute.index === 3) {
        this.minute.value = `${this.minute.n3}/${this.minute.n4}`
      } else if (this.minute.index === 4) {
        if (this.minute.nums.length === 0) {
          this.minute.value = 1
        } else {
          this.minute.value = this.minute.nums.join(',')
        }
      }
    },
    ckMinute (e, i) {
      const ck = e.target.checked
      if (ck) {
        this.minute.nums.push(i)
      } else {
        const index = this.minute.nums.indexOf(i)
        this.minute.nums.splice(index, 1)
      }
      this.chMinute()
    },
    chHour (index) {
      if (index) {
        this.hour.index = index
      }
      if (this.hour.index === 1) {
        this.hour.value = '*'
      } else if (this.hour.index === 2) {
        this.hour.value = `${this.hour.n1}-${this.hour.n2}`
      } else if (this.hour.index === 3) {
        this.hour.value = `${this.hour.n3}/${this.hour.n4}`
      } else if (this.hour.index === 4) {
        if (this.hour.nums.length === 0) {
          this.hour.value = 1
        } else {
          this.hour.value = this.hour.nums.join(',')
        }
      }
    },
    ckHour (e, i) {
      const ck = e.target.checked
      if (ck) {
        this.hour.nums.push(i)
      } else {
        const index = this.hour.nums.indexOf(i)
        this.hour.nums.splice(index, 1)
      }
      this.chHour()
    },
    chDay (index) {
      if (index) {
        this.day.index = index
      }
      if (this.day.index === 1) {
        this.day.value = '*'
      } else if (this.day.index === 2) {
        this.day.value = `${this.day.n1}-${this.day.n2}`
      } else if (this.day.index === 3) {
        this.day.value = `${this.day.n3}/${this.day.n4}`
      } else if (this.day.index === 4) {
        if (this.day.nums.length === 0) {
          this.day.value = 1
        } else {
          this.day.value = this.day.nums.join(',')
        }
      } else if (this.day.index === 5) {
        this.day.value = '?'
      } else if (this.day.index === 6) {
        this.day.value = `${this.day.n5}W`
      } else if (this.day.index === 7) {
        this.day.value = `${this.day.n6}L`
      } else if (this.day.index === 8) {
        this.day.value = 'LW'
      }
    },
    ckDay (e, i) {
      const ck = e.target.checked
      if (ck) {
        this.day.nums.push(i)
      } else {
        const index = this.day.nums.indexOf(i)
        this.day.nums.splice(index, 1)
      }
      this.chDay()
    },
    chMonth (index) {
      if (index) {
        this.month.index = index
      }
      if (this.month.index === 1) {
        this.month.value = '*'
      } else if (this.month.index === 2) {
        this.month.value = `${this.month.n1}-${this.month.n2}`
      } else if (this.month.index === 3) {
        this.month.value = `${this.month.n3}/${this.month.n4}`
      } else if (this.month.index === 4) {
        if (this.month.nums.length === 0) {
          this.month.value = 1
        } else {
          this.month.value = this.month.nums.join(',')
        }
      }
    },
    ckMonth (e, i) {
      const ck = e.target.checked
      if (ck) {
        this.month.nums.push(i)
      } else {
        const index = this.month.nums.indexOf(i)
        this.month.nums.splice(index, 1)
      }
      this.chMonth()
    }
  }
}
</script>
<style lang="less" scoped>
.num{
  margin:0 8px;
  width:80px;
}
</style>
